<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="announcement-card">
          <template #header>
            <div class="card-header">
              <span>最新公告</span>
              <el-button text @click="$router.push('/announcements')">
                查看更多
              </el-button>
            </div>
          </template>
          <div v-if="announcements.length" class="announcement-list">
            <div
              v-for="item in announcements"
              :key="item.announcementId"
              class="announcement-item"
            >
              <h3>{{ item.title }}</h3>
              <p class="content">{{ item.content }}</p>
              <div class="meta">
                <span>发布时间：{{ formatDate(item.createTime) }}</span>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无公告" />
        </el-card>

        <el-card class="forum-card">
          <template #header>
            <div class="card-header">
              <span>热门帖子</span>
              <el-button text @click="$router.push('/forum')">
                查看更多
              </el-button>
            </div>
          </template>
          <div v-if="posts.length" class="post-list">
            <div
              v-for="item in posts"
              :key="item.post_id"
              class="post-item"
              @click="$router.push(`/forum/post/${item.postId}`)"
            >
              <h3>{{ item.title }}</h3>
              <p class="content">{{ item.content }}</p>
              <div class="meta">
                <span>发布时间：{{ formatDate(item.createdTime) }}</span>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无帖子" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="material-card">
          <template #header>
            <div class="card-header">
              <span>急需物资</span>
              <el-button text @click="$router.push('/materials')">
                查看更多
              </el-button>
            </div>
          </template>
          <div v-if="materials.length" class="material-list">
            <div
              v-for="item in materials"
              :key="item.materialId"
              class="material-item"
              @click="$router.push(`/materials/${item.materialId}`)"
            >
              <h3>{{ item.name }}</h3>
              <p class="description">{{ item.description }}</p>
              <div class="meta">
                <span>当前库存：{{ item.quantity }}</span>
<!--                <span>类别：{{ item.typeName }}</span>-->
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无物资" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { faker } from '@faker-js/faker'
import {getLatestAnnouncementList} from "@/api/announcement.js";
import {getHotPost} from "@/api/forum.js";
import {getMaterialShortage} from "@/api/material.js";

// 模拟数据
const announcements = ref([])
const posts = ref([])
const materials = ref([])

const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

const getMaterialType = (type) => {
  const types = ['衣物', '食品', '医疗用品', '学习用品', '其他']
  return types[type] || '未知'
}

const loadData = async () => {
  const res001 = await getLatestAnnouncementList()
  announcements.value = res001.data
  const res002 = await getHotPost()
  posts.value = res002.data
  const res003 = await getMaterialShortage()
  materials.value = res003.data
}

onMounted(async () => {
  await loadData()
})
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.announcement-card,
.forum-card,
.material-card {
  margin-bottom: 20px;
}

.announcement-item,
.post-item,
.material-item {
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
}

.announcement-item:last-child,
.post-item:last-child,
.material-item:last-child {
  border-bottom: none;
}

h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.content {
  color: #606266;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.meta {
  color: #909399;
  font-size: 14px;
}

.meta span {
  margin-right: 15px;
}

.description {
  color: #606266;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
